<template>
  <div class="myAssess flex-col">
    <div class="header items-center bg-white sticky">
      <div
        class="item items-center justify-center"
        v-for="(item, index) in types"
        :key="index"
        :class="{ select: item.value == currentType }"
        @tap="changeType(item)"
      >
        <div class="select-item">
          <span class="name">{{ item.name }}</span>
          <span class="line" v-if="item.value === currentType"></span>
        </div>
      </div>
    </div>
    <!-- <div class="assess bg-white" v-for="(item, index) in assessData.data" :key="index">
      <div class="title flex-row items-center">
        <span class="name">{{item.storeName}}</span>
        <span class="tag">{{item.storeLabel | changeLabel}}</span>
      </div>
      <div class="content">
        <div class="left justify-center">
          <img :src="item.coverUrl | transImgUrl" alt="" class="bg">
        </div>
        <div class="right bg-white flex-col">
          <div class="desc">
            套餐：{{item.specName}}
          </div>
          <div class="desc">
            租期：{{item.startEndTime}}
          </div>
          <div class="price">
            <span class="text">总租金：￥{{item.allRentFee}}</span>
            <span class="num">x{{item.orderNum}}</span>
          </div>
        </div>
      </div>
      <div class="info flex-col">
        <div class="item">
          <span class="name">服务描述</span>
          <div class="scopes flex-row items-center">
            <img v-for="(item, index) in getScope(item.describeStars)" :key="`ms${index}`" :src="item" alt="" class="scope">
          </div>
        </div>
        <div class="item">
          <span class="name">服务态度</span>
          <div class="scopes flex-row items-center">
            <img v-for="(item, index) in getScope(item.serviceStars)" :key="`td${index}`" :src="item" alt="" class="scope">
          </div>
        </div>
        <div class="item">
          <span class="name">发货速度</span>
          <div class="scopes flex-row items-center">
            <img v-for="(item, index) in getScope(item.deliverStars)" :key="`sd${index}`" :src="item" alt="" class="scope">
          </div>
        </div>
        <div class="item items-start">
          <span class="name">评价</span>
          <div class="assess-content">
            {{item.userContent}}
          </div>
        </div>
      </div>
    </div> -->
    <div class="content">
      <UnAssess v-if="currentType === 1" />
      <Assess v-if="currentType === 2" />
    </div>

    <!-- <div class="btn">
      发表评价
    </div> -->
  </div>
</template>

<script>
// import { IMG_ADMIN } from "@config";
import UnAssess from "./components/unAssess";
import Assess from "./components/assess";
export default {
  components: { UnAssess, Assess },
  data() {
    return {
      currentType: 1,
      types: [
        { name: "待评价", value: 1 },
        { name: "已评价", value: 2 },
      ],
      isManage: false,
      star: "https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/common/star.png",
      starEd:
        "https://snyz.oss-cn-hangzhou.aliyuncs.com/assets/common/star-ed.png",
      assessData: {
        page: 1,
        size: 10,
        finish: false,
        data: [],
      },
    };
  },
  computed: {},
  mounted() {
    // this.getData()
  },
  onPullDownRefresh() {
    this.resetData();
  },
  onReachBottom() {
    if (this.assessData.finish) {
      return;
    }
    this.getData();
  },
  methods: {
    changeType({ value }) {
      this.currentType = value;
    },
    getScope(scope) {
      return Array.from({ length: 5 }).map((item, index) => {
        return index + 1 > scope ? this.star : this.starEd;
      });
    },
    getData() {
      // this.$http
      //   .request({
      //     url: "/user/myOrderCommentList.json",
      //     data: {
      //       pageNumber: this.assessData.page,
      //       pageSize: this.assessData.size,
      //     },
      //   })
      //   .then(({ data: { myOrderCommentDTOList } }) => {
      //     this.assessData.data.push(...myOrderCommentDTOList);
      //     if (myOrderCommentDTOList.length < this.assessData.size) {
      //       this.assessData.finish = true;
      //     } else {
      //       this.assessData.finish = false;
      //     }
      //   });
    },
    resetData() {
      this.assessData.data = [];
      this.assessData.page = 1;
      this.assessData.finish = false;
      this.getData();
    },
  },
};
</script>
<style lang="scss">
.myAssess {
  width: 100vw;
  height: 100vh;
  overflow: scroll;
  background-color: #f5f5f5;
  // padding: 12px;
  padding-bottom: 67px;
  .header {
    // position: fixed;
    // top: 0;
    // left: 0;
    width: 100%;
    height: 35px;
    z-index: 999999;
    padding: 0 16px;
    .item {
      flex: 1;
      position: relative;
      height: 100%;
      .select-item {
        position: relative;
        height: 100%;
        .name {
          font-size: 16px;
          line-height: 20px;
          color: #232323;
          margin-top: 7px;
        }
        .line {
          position: absolute;
          left: 0;
          bottom: -3px;
          width: 100%;
          height: 3px;
          background: #29b5ff;
          border-radius: 2px;
        }
        &.select {
          .name {
            color: #29b5ff;
          }
        }
      }
    }
  }
  .content {
    width: 100%;
    z-index: 1;
    // min-height: 100px;
    // background-color: #fff;
    // margin-top: 62px;
  }
}
</style>
